<template>
    <view class="container">
        <view class="logo-container">
            <image class="logo" src="@/static/logo.jpg" mode="aspectFit"></image>
            <text class="app-name">远程超级便利门诊</text>
        </view>
        
        <view class="form-container">
            <view class="input-group">
                <view class="input-icon">
                    <uni-icons type="phone" size="25"></uni-icons>
                </view>
                <input class="input-field" type="number" maxlength="11" placeholder="请输入手机号" v-model="phone"></input>
            </view>
            
            <view class="input-group">
                <view class="input-icon">
                    <uni-icons type="email" size="25"></uni-icons>
                </view>
                <input class="input-field" maxlength="6" type="number" placeholder="请输入验证码" v-model="code"></input>
                <button class="get-code-btn" @click="sendCode">{{codeText}}</button>
            </view>
            
            <button class="login-btn" @click="login">登录/注册</button>
            
            <view class="agreement">
                <checkbox-group @change="agreeChange">
                    <checkbox :checked="isAgree" color="#1677ff"></checkbox>
                </checkbox-group>
                <text>我已阅读并同意</text>
                <text class="agreement-link" @click="showAgreement">《用户协议》</text>
                <text>和</text>
                <text class="agreement-link" @click="showPrivacy">《隐私政策》</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phone: '',
            code: '',
            codeText: '获取验证码',
            isCounting: false,
            countDown: 60,
            isAgree: true
        }
    },
    methods: {
        sendCode() {
            if (!this.phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                });
                return;
            }
            
            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                uni.showToast({
                    title: '手机号格式不正确',
                    icon: 'none'
                });
                return;
            }
            
            if (this.isCounting) return;
            
            this.isCounting = true;
            this.codeText = `${this.countDown}s后重新获取`;
            
            let timer = setInterval(() => {
                this.countDown--;
                this.codeText = `${this.countDown}s后重新获取`;
                
                if (this.countDown <= 0) {
                    clearInterval(timer);
                    this.isCounting = false;
                    this.countDown = 60;
                    this.codeText = '获取验证码';
                }
            }, 1000);
            
            // 模拟发送验证码
            uni.showToast({
                title: '验证码已发送',
                icon: 'none'
            });
        },
        login() {
            if (!this.phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                });
                return;
            }
            
            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                uni.showToast({
                    title: '手机号格式不正确',
                    icon: 'none'
                });
                return;
            }
            
            if (!this.code) {
                uni.showToast({
                    title: '请输入验证码',
                    icon: 'none'
                });
                return;
            }
            
            if (!this.isAgree) {
                uni.showToast({
                    title: '请同意用户协议和隐私政策',
                    icon: 'none'
                });
                return;
            }
            
            // 模拟登录
            uni.showLoading({
                title: '登录中...'
            });
            
            setTimeout(() => {
                uni.hideLoading();
                uni.showToast({
                    title: '登录成功',
                    icon: 'success'
                });
                
                // 登录成功后跳转到首页
                setTimeout(() => {
                    uni.switchTab({
                        url: '/pages/index/index'
                    });
                }, 1000);
            }, 1500);
        },
        agreeChange(e) {
            this.isAgree = e.detail.value.length > 0;
        },
        showAgreement() {
            uni.showModal({
                title: '用户服务协议',
                content: '这里是用户服务协议的详细内容...',
                showCancel: false
            });
        },
        showPrivacy() {
            uni.showModal({
                title: '隐私政策',
                content: '这里是隐私政策的详细内容...',
                showCancel: false
            });
        }
    }
}
</script>

<style>
.container {
    height: 100vh;
    background-color: #fff;
    padding: 0 30px;
}

.logo-container {
    text-align: center;
    padding: 80px 0 60px;
}

.logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.app-name {
    display: block;
    font-size: 20px;
    color: #333;
    margin-top: 20px;
    font-weight: bold;
}

.form-container {
    padding: 0 10px;
}

.input-group {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    margin-bottom: 20px;
}

.input-icon {
    width: 30px;
    text-align: center;
}

.input-icon .iconfont {
    font-size: 20px;
    color: #1677ff;
}

.input-field {
    flex: 1;
    height: 40px;
    padding: 0 10px;
    font-size: 16px;
}

.get-code-btn {
    color: #1677ff;
    font-size: 14px;
    padding: 5px 10px;
}

.login-btn {
    background-color: #1677ff;
    color: #fff;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 25px;
    margin-top: 40px;
    font-size: 16px;
}

.agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 12px;
    color: #666;
}

.agreement-link {
    color: #1677ff;
    margin: 0 2px;
}
</style>